<template>
  <div id="app">
    <form class="shadow" action="" method="get">
<!--      商品名-->
      <div class="input_control">
        <input type="text" class="form_input" placeholder="商品名称" v-model="foodForm.name"></input>
      </div>
<!--      商品类型-->
      <template>
        选择商品类型 ：
        <el-select v-model="foodForm.types" placeholder="请选择">
          <el-option
              v-for="item in types"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </template>
<!--      价格-->
      <div class="input_control">
        <input type="number" name="number" class="form_input" placeholder="原价" v-model="foodForm.price"/>
      </div>
      <el-input
          type="textarea"
          autosize
          placeholder="商品描述"
          v-model="foodForm.describes">
      </el-input>
      <div class="input_control">
        商品封面图：
        <el-upload
            class="upload-demo"
            action="http://192.168.110.110:8082/api/plug/uploadImages"
            :on-change="uphandleChange"
            :on-success="upProductCover"
            :file-list="fileimgList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
      </div>
      <div class="input_control">
        商品列表图：
        <el-upload
            class="upload-demo"
            action="http://192.168.110.110:8082/api/plug/uploadImages"
            :on-change="handleChange"
            :on-success="imglist"
            :file-list="fileimglistList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
      </div>
<!--      ---------------规格----------------     -->
      <el-row style="overflow: auto; text-align: center;">
        <el-button type="primary" @click="dialogFormVisible = true" style="margin-bottom: 10px;">添加规格</el-button>
        <el-table
            :data="foodForm.spec"
            style="margin-bottom: 20px;"
            :row-class-name="tableRowClassName">
          <el-table-column
              prop="name"
              label="规格">
          </el-table-column>
          <el-table-column
              prop="stock"
              label="数量">
          </el-table-column>
          <el-table-column
              prop="fee"
              label="价格">
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>


      <div class="input_control">
        <form method="get">
          是否上架：<input type="radio" name="status" value="1" v-model="foodForm.status" checked>上架
          <input type="radio" name="status" value="0" v-model="foodForm.status" checked>下架
        </form>
      </div>
      <button class="button button2" @click="addgoods">添加商品</button>
    </form>


<!--    规格添加 隐藏-->
    <el-dialog title="添加规格" :visible.sync="dialogFormVisible">
      <el-form :rules="specFormrules" :model="specForm">
        <el-form-item label="名称" label-width="100px" prop="name">
          <el-input v-model="specForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" label-width="100px">
          <el-input-number v-model="specForm.stock" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="价格" label-width="100px">
          <el-input-number v-model="specForm.fee" :min="0" :max="10000"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addspecs">确 定</el-button>
      </div>
    </el-dialog>


    <div style="margin:30px"></div>


  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    return {
      foodForm: {
        name: '',
        types: '',
        price: '',
        describes: '',
        img: 'http://sgls.oss-cn-beijing.aliyuncs.com/uploads/20210416/4715a70847163a869eff55535b7be246.jpg',
        imglist: [
            'http://sgls.oss-cn-beijing.aliyuncs.com/uploads/20210416/a0fe76a93e7e2fe3d70c46b774349807.jpg',
        ],
        spec: [{
          name: '浙江产',
          stock: '20',
          fee: '20',
        }],
        status: '1',
      },
      types: [],
      fileimgList: [],
      fileimglistList: [],
      dialogFormVisible: false,
      specForm: {
        name: '',
        stock: 20,
        fee: 0,
      },
      specFormrules: {
        spec: [
          { required: true, message: '请输入规格', trigger: 'blur' },
        ],
      },


    }
  },
  created() {

    this.getTypes()

  },
  methods: {

    // 分类请求--重复  get
    async getTypes() {
      await this.$http.post("/admin/typeList").then(res => {
        console.log(res);
        this.types = res.data.data;
      }).catch(err => {
        console.log("son1 getTypes err => ", err);
      })
    },

    // 添加商品--未完成
    async addgoods() {
      // let img =  JSON.stringify(this.foodForm.img)
      console.log(this.foodForm.img);
      console.log(this.foodForm.imglist);
      await this.$http.post("/admin/addProduct",{
        name: this.foodForm.name,
        types: this.foodForm.types,
        price: this.foodForm.price,
        describes: this.foodForm.describes,
        img: JSON.stringify(this.foodForm.img),
        imglist: JSON.stringify(this.foodForm.imglist),
        spec: this.foodForm.spec,
        status: this.foodForm.status,
      }).then(res =>{
        console.log(res)
      }).catch(err => {
        console.log("addgoods err => ",err)
      })

    },
    //自定义列模板
    tableRowClassName(row, index) {
      if (index === 1) {
        return 'info-row';
      } else if (index === 3) {
        return 'positive-row';
      }
      return '';
    },
    handleDelete(index){
      // console.log(index)
      this.foodForm.spec.splice(index, 1);
    },
    // 添加规格
    addspecs(){
      this.foodForm.spec.push({...this.specForm});
      this.specForm.specs = '名称';
      this.specForm.stock = 20;
      this.specForm.fee = 0;
      this.dialogFormVisible = false;
    },
    // 图片上传
    uphandleChange(file, fileList) {
      this.fileimgList = fileList.slice(-3);
    },
    handleChange(file, fileList) {
      this.fileimglistList = fileList.slice(-3);
    },
    // 放入foodForm
    upProductCover(response, file, fileList) {
      this.foodForm.img = response.data.url;
      console.log(response.data.url);
    },
    imglist(response, file, fileList) {
      this.foodForm.imglist.push(response.data.url);
      console.log(response.data);
    },
  },
}
</script>

<style lang="less" scoped>

.goodsForm {
  //margin: 8px 0;
  p {
    //width: 150px;
    display: inline-block;
  }


}



.input_control{
  width:360px;
  margin:20px auto;
}
input[type="text"],input[type="number"],#btn1,#btn2{
  box-sizing: border-box;
  text-align:center;
  font-size:1em;
  height:2.7em;
  border-radius:4px;
  border:1px solid #c8cccf;
  color:#6a6f77;
  -web-kit-appearance:none;
  -moz-appearance: none;
  display:block;
  outline:0;
  padding:0 1em;
  text-decoration:none;
  width:100%;
}
input[type="text"]:focus{
  border:1px solid #ff7496;
}


.button {
  background-color: #4562c2; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow:  9px 9px 18px #d9d9d9,
    -9px -9px 18px #ffffff;
}

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.el-button {
  margin:10px;
  box-shadow:  9px 9px 18px #d9d9d9,
    -9px -9px 18px #ffffff;
}



</style>
